<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="于浩">
        <title>模态框</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <style>
            
        </style>
    </head>
    <body>
        <!--定义按钮
        data-toggle设置按钮的切换功能,modal为模态弹出.
        data-target设置切换的模态框的id
        -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">弹出模态框</button>

        <button onclick="myShow()">弹出</button>

        <!--modal 定义模态框
        fade 定义模态框打开动画
        -->
        <div class="modal fade" id="myModal">

            <!--modal-dialog 定义模态提示框-->
            <div class="modal-dialog">

                <!--modal-content 模态框提示的内容-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">温馨提示:</h4>
                    </div>
                    <div class="modal-body">
                        今天要考试!
                    </div>
                    <div class="modal-footer">   
                        <button class="btn btn-default" data-dismiss="modal">好的</button>
                    </div>

                </div>
            </div>
        </div>



        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>

        <script>
            function myShow(){
                setTimeout(function(){
                    $('#myModal').modal('show');
                },3000)                
            }
        </script>
    </body>
</html>